[Ruby on Rails]AdminLTEをテンプレートとして使用する(1) – アプリの概要

Ruby on Railsで作るダッシュボード・管理画面

#Ruby on Rails

t.honda

2015.09.06

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

Ruby on Railsでダッシュボードや管理画面を作るケースは多いかと思います。このとき見栄えをよくするため、テンプレートを使用することも多いかと思います。今回はAdminLTEというテンプレートをRailsと組み合わせてみました。

AdminLTEとは

AdminLTEについては公式ページの以下の文が特徴を一言で上手く表しているのではないかと思います。

AdminLTE is a popular open source WebApp template for admin dashboards and control panels.

公式ページより

このページ内のサンプル画面を見てもらうと、棒グラフ・線グラフ・地図・パネルや円グラフなど様々なテンプレートが用意されていることが分かるかと思います。これら以外にも入力フォーム・テーブル・カレンダーなど、ダッシュボードや管理画面を作るのに必要そうなテンプレートが数多く用意されています。

今回つくるアプリの概要

では、RailsとAdminLTEを組み合わせたアプリの概要です。今回はサーバとクライアントを明確に別け

サーバ　　　　・・・　RailsによるAPIサーバで、JSONを返却する
クライアント　・・・　AdminLTEのライブラリとHTMLのみで、サーバよりJSONを取得して表示する

という構成にしました。

サーバとクライアントを分離した理由は、純粋なクライアント側のテンプレートであるAdminLTEを極力そのままの構成で使用したかったためです。仮にRailsにAdminLTEを組み込むと、AdminLTEのHTMLにRailsのソースが混じることや、AdminLTEのフォルダ構成を変える必要などが出てくると思います。今回は、それらを避けました。

フォルダ構成

以下のようなフォルダ構成としました。

.
├── client ・・・クライアント
│   ├── lib
│   │   └── adminlte ・・・AdminLTEに必要なライブラリを格納
│   │       ├── bootstrap
│   │       ├── dist
│   │       ├── plugins
│   ├── pages
│   │   └── charts
│   │       └── chartjs.html　・・・AdminLTEのchartjs.htmlを流用した画面
│   ├── starter.html　　　　　 ・・・AdminLTEのstarter.htmlを流用した画面
└── server　・・・サーバ(Rails)
    ├── Gemfile
    ├── app
    │   ├── controllers
    │   │   ├── api
    │   │   │   └── v1
    │   │   │       ├── application_base_controller.rb
    │   │   │       └── pages
    │   │   │           └── charts
    │   │   │               └── chartjs_controller.rb
    │   │   ├── application_controller.rb
(以降略)

先にも書いたようにclient・serverとでそれぞれ分離させています。

clientフォルダについては、AdminLTEのライブラリについてはlib/adminlteフォルダ内に配置し、htmlファイルは直下やpagesフォルダ内に置くこととしました。lib内にadminlteフォルダを作成した理由は、別の機会に別のライブラリを併用することも考えてのことです(そのときはlib内に別フォルダを作成してそこにライブラリを配置することになるでしょう)。

serverフォルダについては、ここに純粋なRailsアプリを作成しています。今回はAPIサーバなの、Rails側にViewはありません。